<template>
  <div style="background-color: white; flex: 1">
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      style="margin-left: 20px"
      @tab-click="handleClick"
    >
      <el-tab-pane label="激光控制器" name="00">激光器</el-tab-pane>
      <el-tab-pane label="探测器" name="01">
        <div>
          探测器工作模式：
          <el-select
            v-model="value"
            placeholder="请选择"
            clearable
            style="width: 240px; margin: 15px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <view v-if="value == '03'"
            >设置目标属性
            <view>
              坐标X
              <el-input-number v-model="numX" :min="0" :max="1000" />
            </view>
            <view>
              坐标Y
              <el-input-number v-model="numY" :min="0" :max="1000" />
            </view>
          </view>

          <view v-if="value == '02'"
            >目标选择：
            <el-select
              v-model="value2"
              placeholder="请选择目标"
              style="width: 240px"
              clearable
            >
              <el-option
                v-for="item in option2s"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </view>
        </div>
        <!-- 镜头控制信息： -->
        <div>
          背景选择：
          <el-select
            v-model="valuebg"
            placeholder="请选择"
            clearable
            style="width: 240px; margin: 15px"
          >
            <el-option
              v-for="item in optionbgs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div>
          图像功能：
          <el-checkbox v-model="checked1" label="去雾" size="large" />
          <el-checkbox v-model="checked2" label="锐化" size="large" />
          <el-checkbox v-model="checked1" label="OSD" size="large" />
          <el-checkbox v-model="checked2" label="视频记录" size="large" />
          <el-checkbox v-model="checked1" label="水平镜像" size="large" />
          <el-checkbox v-model="checked2" label="上下翻转" size="large" />
          <el-checkbox v-model="checked1" label="DIS" size="large" />
          <el-checkbox v-model="checked2" label="视频回放" size="large" />
        </div>

        <div>
          多光视频：
          <el-checkbox v-model="checked1" label="短波红外" size="large" />
          <el-checkbox v-model="checked2" label="中波红外" size="large" />
          <el-checkbox v-model="checked1" label="长波红外" size="large" />
          <el-checkbox v-model="checked2" label="高速相机" size="large" />
        </div>

        <!-- <div>
          对焦:
          <el-select
            v-model="value3"
            placeholder="请选择"
            clearable
            style="width: 240px; margin: 15px"
          >
            <el-option
              v-for="item in option3s"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          焦距信息：
          <el-select
            v-model="value4"
            placeholder="请选择"
            clearable
            style="width: 240px; margin: 15px"
          >
            <el-option
              v-for="item in option4s"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div> -->

        <!-- <div>
          滤光信息：
          <el-select
            v-model="value5"
            placeholder="请选择"
            clearable
            style="width: 240px; margin: 15px"
          >
            <el-option
              v-for="item in option5s"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div> -->

        <!-- <div>
          <view>
            转台方位角度:
            <el-select
              v-model="value6"
              placeholder="请选择"
              clearable
              style="width: 100px; margin: 5px"
            >
              <el-option key="0" label="左转" value="0" />

              <el-option key="1" label="右转" value="1" />
            </el-select>
            <el-input-number v-model="numX" :min="0" :max="180" />
          </view>
          <view>
            转台俯仰角度:
            <el-select
              v-model="value7"
              placeholder="请选择"
              clearable
              style="width: 100px; margin: 5px"
            >
              <el-option key="0" label="向上" value="0" />

              <el-option key="1" label="向下" value="1" />
            </el-select>
            <el-input-number v-model="numY" :min="0" :max="180" />
          </view>
        </div> -->
      </el-tab-pane>
      <el-tab-pane label="转台" name="02">转台</el-tab-pane>
      <el-tab-pane label="快反" name="03">快反</el-tab-pane>
      <el-tab-pane label="主镜对焦电机" name="04">主镜对焦电机</el-tab-pane>
      <el-tab-pane label="探测器镜头电机" name="05">探测器镜头电机</el-tab-pane>
    </el-tabs>

    <!-- <p class="description">配置管理界面</p> -->
    <el-button type="primary" style="margin-top: 20px">确认</el-button>
  </div>
</template>

<script>
export default {
  name: "TopMenu",

  data() {
    return {
      activeName: "00",
      value: "",
      options: [
        {
          value: "01",
          label: "目标搜索",
        },
        {
          value: "02",
          label: "目标选择",
        },
        {
          value: "03",
          label: "手动跟踪",
        },
      ],

      numX: 0,
      numY: 0,
      value2: "",
      option2s: [
        {
          value: "01",
          label: "无人机（亮）",
        },
        {
          value: "02",
          label: "无人机（暗）",
        },
        {
          value: "03",
          label: "人",
        },
        {
          value: "04",
          label: "车",
        },
        {
          value: "05",
          label: "船",
        },
        {
          value: "06",
          label: "鸟",
        },
      ],

      value3: "",
      option3s: [
        {
          value: "01",
          label: "精聚焦-",
        },
        {
          value: "02",
          label: "精聚焦+",
        },
        {
          value: "03",
          label: "停止聚焦",
        },
        {
          value: "04",
          label: "粗聚焦-",
        },
        {
          value: "05",
          label: "粗聚焦+",
        },
      ],

      value4: "",
      option4s: [
        {
          value: "01",
          label: "变倍+",
        },
        {
          value: "02",
          label: "变倍-",
        },
        {
          value: "03",
          label: "停止调焦",
        },
        {
          value: "04",
          label: "连续变焦+",
        },
        {
          value: "05",
          label: "连续变焦-",
        },
      ],

      value5: "",
      option5s: [
        {
          value: "01",
          label: "透雾功能（开）",
        },
        {
          value: "02",
          label: "透雾功能（关）",
        },
      ],

      valuebg: "",
      optionbgs: [
        {
          value: "01",
          label: "空天背景",
        },
        {
          value: "02",
          label: "地面背景",
        },
        {
          value: "03",
          label: "水面背景",
        },
      ],

      value6: "",
      value7: "",
    };
  },
};
</script>

<style scoped>
.top-menu {
  background-color: #333;
  color: white;
  padding: 10px;
}

.top-menu a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
  display: inline-block;
}

.top-menu a.active {
  font-weight: bold;
}
</style>
